<template>
  <basicModal @register="register" :bodyStyle="getBodyStyle" ref="modalRef" modalClass="app-search">
    <div class="app-search-card">
      <div class="app-search-card-input">
        <a-input
          ref="searchInput"
          v-model="searchKeyword"
          :loading="loading"
          allowClear
          placeholder="请输入关键词搜索"
          size="large"
          @input="handleSearch"
        >
          <template #prefix>
            <span v-if="loading"><LoadingOutlined class="arco-icon" /></span>
            <span v-else><SearchOutlined class="arco-icon" /></span>
          </template>
        </a-input>
      </div>

      <div class="app-search-card-result" :class="{ 'search-result-dark': settingStore.darkTheme }">
        <div v-if="!loading && !searchResult.length" class="no-result">
          <a-empty v-if="!loading" :image="simpleImage" />
          <a-spin v-else />
        </div>
        <div v-else-if="loading" class="no-result">
          <a-spin />
        </div>
        <ul v-else class="result-ul">
          <li
            v-for="(item, index) in searchResult"
            :key="item.key"
            :class="{ 'result-ul-li-on': index === activeIndex }"
            :data-index="index"
            class="result-ul-li"
            @click="handleEnter"
            @mouseenter="handleMouseenter"
          >
            <a href="javascript:;">
              <div class="result-ul-li-icon">
                <InteractionOutlined class="arco-icon" />
              </div>
              <div class="result-ul-li-content"> {{ item.title }}</div>
              <div class="result-ul-li-action">
                <EnterOutlined class="arco-icon" />
              </div>
            </a>
          </li>
        </ul>
      </div>
    </div>
    <template #footer>
      <div class="app-search-card-footer">
        <ul class="commands">
          <li>
            <span class="commands-icon">
              <EnterOutlined class="arco-icon" />
            </span>
            <span>确认</span>
          </li>
          <li>
            <span class="mr-2 commands-icon">
              <ArrowUpOutlined class="arco-icon" />
            </span>
            <span class="commands-icon">
              <ArrowDownOutlined class="arco-icon" />
            </span>
            <span>切换</span>
          </li>
          <li>
            <span class="commands-icon">
              <CloseOutlined class="arco-icon" />
            </span>
            <span>ESC关闭</span>
          </li>
        </ul>
      </div>
    </template>
  </basicModal>
</template>

<script lang="ts" setup>
  import type { Menu } from '@/router/types';
  import { ref, unref, onBeforeMount, nextTick, computed } from 'vue';
  import { basicModal, useModal } from '@/components/Modal';
  import {
    EnterOutlined,
    ArrowUpOutlined,
    ArrowDownOutlined,
    CloseOutlined,
    InteractionOutlined,
    LoadingOutlined,
    SearchOutlined,
  } from '@vicons/antd';
  import { onKeyStroke, useDebounceFn } from '@vueuse/core';
  import { getMenus } from '@/router/menus';
  import { cloneDeep } from 'lodash-es';
  import { filter } from '@/utils/helper/treeHelper';
  import { useGo } from '@/hooks/web/usePage';
  // import { darkTheme } from 'naive-ui';
  import { Empty } from '@arco-design/web-vue';
  import { useProjectSettingStore } from '@/store/modules/projectSetting';

  const loading = ref(false);
  const searchInput = ref();
  const searchKeyword = ref('');
  const searchResult = ref<SearchResult[]>([]);
  const activeIndex = ref(-1);
  let menuList: Menu[] = [];
  const go = useGo();
  const settingStore = useProjectSettingStore();
  // const getDarkTheme = computed(() => (designStore.darkTheme ? darkTheme : undefined));
  const simpleImage = Empty.PRESENTED_IMAGE_SIMPLE;

  interface SearchResult {
    title: string;
    path: string;
    icon?: string;
    key: string;
  }

  const [register, { openModal, closeModal }] = useModal({
    title: '搜索菜单',
    width: 608,
    keyboard: false,
    // footer: null,
  });

  const getBodyStyle = computed(() => {
    return {
      background: settingStore.darkTheme ? 'rgb(31,31,31)' : 'rgb(239, 239, 245)',
    };
  });

  onBeforeMount(async () => {
    const list = await getMenus();
    menuList = cloneDeep(list);
  });

  function show() {
    openModal();
    nextTick(() => {
      searchInput.value.focus();
    });
  }

  function hide() {
    closeModal();
  }

  const handleSearch = useDebounceFn(search, 200);

  function search() {
    loading.value = true;
    searchKeyword.value = searchKeyword.value.trim();
    if (!searchKeyword.value) {
      searchResult.value = [];
      loading.value = false;
      return;
    }
    const reg = createSearchReg(unref(searchKeyword));
    const filterMenu = filter(menuList, (item) => {
      return reg.test(item.title) && !item.meta?.hidden;
    });
    searchResult.value = handlerSearchResult(filterMenu, reg);
    activeIndex.value = 0;
    nextTick(() => {
      loading.value = false;
    });
  }

  function handlerSearchResult(filterMenu: Menu[], reg: RegExp, parent?: Menu) {
    const ret: SearchResult[] = [];
    filterMenu.forEach((item) => {
      const { title, path, key, icon, children, meta } = item;
      if (!meta?.hidden && reg.test(title)) {
        ret.push({
          title: parent?.title ? `${parent.title} > ${title}` : title,
          path: path,
          icon,
          key,
        });
      }
      if (!meta?.hideChildrenInMenu && Array.isArray(children) && children.length) {
        ret.push(...handlerSearchResult(children as any, reg, item));
      }
    });
    return ret;
  }

  // Translate special characters
  function transform(c: string) {
    const code: string[] = ['$', '(', ')', '*', '+', '.', '[', ']', '?', '\\', '^', '{', '}', '|'];
    return code.includes(c) ? `\\${c}` : c;
  }

  function createSearchReg(key: string) {
    const keys = [...key].map((item) => transform(item));
    const str = ['', ...keys, ''].join('.*');
    return new RegExp(str);
  }

  function handleMouseenter(e: any) {
    const index = e.target.dataset.index;
    activeIndex.value = Number(index);
  }

  function handleClose() {
    searchResult.value = [];
    searchKeyword.value = '';
    hide();
  }

  async function handleEnter() {
    if (!searchResult.value.length) {
      return;
    }
    const result = unref(searchResult);
    const index = unref(activeIndex);
    if (result.length === 0 || index < 0) {
      return;
    }
    const to = result[index];
    handleClose();
    await nextTick();
    go(to.path);
  }

  // 按方向上键
  function handleUp() {
    if (!searchResult.value.length) return;
    activeIndex.value--;
    if (activeIndex.value < 0) {
      activeIndex.value = searchResult.value.length - 1;
    }
  }

  // 按方向下键
  function handleDown() {
    if (!searchResult.value.length) return;
    activeIndex.value++;
    if (activeIndex.value > searchResult.value.length - 1) {
      activeIndex.value = 0;
    }
  }

  // 回车搜索
  onKeyStroke('Enter', handleEnter);

  // 按方向上键
  onKeyStroke('ArrowUp', handleUp);

  // 按方向下键
  onKeyStroke('ArrowDown', handleDown);

  // 键盘 esc 取消弹窗
  onKeyStroke('Escape', handleClose);

  defineExpose({
    show,
  });
</script>
<style lang="less">
  .app-search .ant-modal .ant-modal-content .ant-modal-footer {
    padding: 2px 0;
  }
  .app-search {
    .arco-modal-body {
      padding: 20px;
      //background: rgb(239, 239, 245);
    }
    .arco-modal-footer {
      padding: 0 20px;
    }
  }
</style>
<style lang="less" scoped>
  .app-search {
    position: fixed;
    top: 60px;
    left: 50%;
    margin-left: -235px;

    &-card {
      width: 100%;
      padding: 0;
      background: var(--color);
      box-shadow: var(--box-shadow);

      &-input {
        margin-top: 6px;
      }

      :deep(.n-card .n-card__footer) {
        padding: 0;
      }

      &-result {
        .no-result {
          font-size: 0.9em;
          margin: 0 auto;
          padding: 36px 0;
          text-align: center;
          width: 80%;

          p {
            color: #969faf;
          }
        }

        .result-ul {
          list-style: none;
          margin: 14px 0 0 0;
          padding: 0;

          :deep(.n-scrollbar .n-scrollbar-container .n-scrollbar-content) {
            max-height: 640px;
          }

          &-li {
            border-radius: 4px;
            display: flex;
            padding-bottom: 8px;
            position: relative;

            a {
              display: flex;
              align-items: center;
              background: #fff;
              border-radius: 4px;
              padding: 0 12px;
              width: 100%;
              color: rgb(51, 54, 57);
              border-bottom: 1px solid var(--color-fill-4);

              .n-icon {
                color: #969faf;
              }
            }

            &-content {
              align-items: center;
              color: var(--text-color);
              display: flex;
              flex-direction: row;
              height: 56px;
              padding-left: 6px;
              padding-right: 12px;
              flex: 1;
              box-sizing: border-box;
            }

            &-icon {
              font-size: 18px;
            }

            &-on {
              a {
                background-color: #2d8cf0;
                color: #fff;

                .n-icon {
                  color: #fff;
                }

                .result-ul-li-content {
                  color: #fff;
                }
              }
            }
          }
        }
      }

      .search-result-dark {
        .result-ul {
          &-li {
            a {
              background: #282828;
              color: #b3b3b3;
            }
            &-on {
              a {
                background-color: #2d8cf0;
                color: #fff;

                .n-icon {
                  color: #fff;
                }

                .result-ul-li-content {
                  color: #fff;
                }
              }
            }
          }
        }
      }

      &-footer {
        align-items: center;
        background: var(--color);
        border-radius: 0 0 8px 8px;
        box-shadow: var(--box-shadow);
        display: flex;
        flex-shrink: 0;
        height: 44px;
        padding: 0 14px;
        position: relative;
        user-select: none;
        width: 100%;

        .commands {
          display: flex;
          align-items: center;

          li {
            display: flex;
            align-items: center;
            margin-right: 14px;
            padding-left: 1px;

            span {
              color: #969faf;
            }
          }

          &-icon {
            align-items: center;
            background: linear-gradient(-225deg, var(--color), var(--color));
            border-radius: 2px;
            box-shadow: inset 0 -2px 0 0 #cdcde6, inset 0 0 1px 1px #fff,
              0 1px 2px 1px rgba(30, 35, 90, 0.4);
            display: flex;
            height: 18px;
            justify-content: center;
            margin-right: 0.4em;
            padding-bottom: 2px;
            width: 20px;
          }
        }
      }
    }
  }

  .light-item-bg {
    background: rgb(239, 239, 245);
  }
</style>
